<template>
  <div class="config-manage">
    <div class="config-con">
      <div class="config-editor" ref="configEditor"></div>
      <div class="quill-editor" v-show="curConfig.detail && showDetail">
        <iframe
          class="full"
          :src="curConfig.detail"
          v-if="showDetail && showDetail"
        />
      </div>
    </div>
    <div class="foot-operate">
      <Button @click="handleOpenDetail" v-show="curConfig.detail"
        >打开详情</Button
      >
      <Button type="primary" @click="handleSave">保存</Button>
    </div>
    <Spin fix v-show="loading"></Spin>
  </div>
</template>

<script>
import jsoneditor from "jsoneditor";
import "jsoneditor/dist/jsoneditor.css";
import { saveConfig, getConfig } from "@/api";
import store from "@/store";
// import { setGlobalData } from "@/initMicroApps";
export default {
  props: {
    curPathProp: {
      type: String,
    },
    showModal: {
      type: Boolean,
    },
  },
  data() {
    return {
      showDetail: false,
      loading: false,
      showTable: false,
      content: "",
      editorOption: {},
      configEditor: null,
      curPath: "",
      curConfig: {},
    };
  },

  watch: {
    curPathProp(path) {
      this.getCurConfig(path);
    },
  },

  methods: {
    handleOpenDetail() {
      if (this.curConfig.detail) {
        this.showDetail = true;
      }
    },
    handleSetConfig(config) {
      this.curConfig = config;
      if (!this.configEditor) {
        const options = {
          mode: "code",
          modes: ["code", "text", "tree", "preview"],
        };
        this.configEditor = new jsoneditor(this.$refs.configEditor, options);
      }

      this.configEditor.set(this.curConfig.config ? this.curConfig.config : {});
    },

    async getCurConfig(path) {
      this.curPath = path;
      let config = {};
      try {
        config = await getConfig("path", this.curPath);
        if (!config) {
          config = {
            config: {},
          };
        }
      } catch {
        config = {
          config: {},
        };
      }
      this.handleSetConfig(config);
      if (path === this.$route.name) {
        if (this.curConfig.config) {
          let config = this.curConfig.config;
          store.commit("SET_CURCONFIG", config);
        } else {
          store.commit("SET_CURCONFIG", {});
        }
        // setGlobalData({ curConfig: this.curConfig });
      }

      this.showTable = false;
    },

    async handleSave() {
      this.loading = true;

      try {
        let config = this.configEditor.get();
        let param = {
          id: this.curConfig._id ? this.curConfig._id : "",
          name:
            this.curConfig && this.curConfig.name
              ? this.curConfig.name
              : this.$route.name,
          path:
            this.curConfig && this.curConfig.path
              ? this.curConfig.path
              : this.$route.name,
          config,
          detail: this.curConfig.detail
            ? this.curConfig.detail
            : "https://docs.qq.com/doc/DWU9Lbkp5b2xuR2xR",
        };
        let res = await saveConfig(param);
        this.curConfig = res;
        if (this.$route.name == this.curPath) {
          store.commit("SET_CURCONFIG", config);
          // setGlobalData({ curConfig: this.curConfig });
        }
      } catch {}

      this.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.config-manage {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;
  .config-con {
    display: flex;
    flex: 1;
    overflow: hidden;
    .config-editor {
      flex: 1;
    }
    .quill-editor {
      flex: 1;
      height: 100%;
    }
  }
  .foot-operate {
    text-align: right;
    line-height: 50px;
    height: 50px;
  }
}
</style>
